<template>
  <div class="device">
    <div class="device-body">
      <div class="device-radio-body">
        <el-radio-group v-model="activeName" size="small" @change="selectStyle">
          <el-radio-button label="first" >人员设备</el-radio-button>
          <el-radio-button label="second" disabled>资产设备</el-radio-button>
          <el-radio-button label="third" >锥桶信息</el-radio-button>
        </el-radio-group>
      </div>
      <div class="device-add-button">
        <div style="width: 100px">
          <el-button size="mini" style="color:#1c7cd5;width: 100px;height: 24px;padding: 4px 3px" icon="el-icon-plus" @click="deviceadd">新增终端</el-button>
        </div>
      </div>
      <div :class="deviceStyle">
            <div style="padding-left: 0px;padding-top: 1px; padding-right: 0px;">
              <el-table
                :data="deviceUser"
                style="width: 100%;background-color: rgba(1,1,1,0);"
                height="270px"
                stripe
                :header-cell-style="{background:'#1C7CD5',color:'#fff'}">
                <el-table-column
                  prop="termId"
                  label="设备号"
                  width="180" height="20">
                </el-table-column>
                <el-table-column
                  prop="type"
                  label="终端类型"
                  width="120">
                  <template slot-scope="scope">
                    <span v-if="scope.row.type==1">安全帽</span>
                    <span v-if="scope.row.type==2">手环</span>
                    <span v-if="scope.row.type==3">安全带</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="ownerName"
                  width="120"
                  label="姓名">
                </el-table-column>
                <el-table-column
                  prop="ownerRole"
                  label="工种"
                  width="80">
                  <template slot-scope="scope">
                    <span v-if="scope.row.ownerRole==1">技工</span>
                    <span v-if="scope.row.ownerRole==2">安全员</span>
                    <span v-if="scope.row.ownerRole==3">监理</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fenceId"
                  label="围栏生效"
                  width="140">
                </el-table-column>
                <el-table-column
                  label="操作">
                  <template slot-scope="scope">
                    <el-row>
                      <el-button type="success" style="border:0px solid #1c7cd5;border-radius:2px;background-color:#1c7cd5;width: 36px;height:20px;font-size: 12px;padding: 0" @click="editDevice(scope.$index, scope.row)">编辑</el-button>
                      <el-button type="info" style="border:0px solid #1c7cd5;border-radius:2px;background-color:#F33718;width: 36px;height:20px;font-size: 12px;padding: 0;margin: 2px"  @click="deleteDevice(scope.$index, scope.row)">删除</el-button>
                    </el-row>
                  </template>
                </el-table-column>
              </el-table>
            </div>
      </div>

      <div class="device-info-form" :style="deviceInfoFormStyle">
        <el-form class="apply-form first-form" :model="deviceUserInfo1" :rules="rules" ref="deviceUserInfo">
          <input type="hidden" v-model="deviceUserInfo1.id">
          <el-form-item label="设备编号:" prop="termId">
          <el-input v-model="deviceUserInfo1.termId" size="mini" placeholder="请填写设备编号" @focus="clearError"></el-input>
          </el-form-item>

          <el-form-item label="设备类型:" prop="type">
          <el-select v-model="deviceUserInfo1.type" size="mini" style="width: 180px;" placeholder="请选择设备类型">
            <el-option :value="1" label="安全帽"></el-option>
            <el-option :value="2" label="手环"></el-option>
            <el-option :value="3" label="安全带"></el-option>
          </el-select>
          </el-form-item>

          <el-form-item label="绑定人员:" prop="ownerId">
          <el-select v-model="deviceUserInfo1.ownerId" size="mini" style="width: 180px;" placeholder="请选择人员">
            <el-option v-for="(item,index) in owner" :key="index" :label="item.name+'('+getRoleName(item.role)+')'" :value="item.id"></el-option>
          </el-select>
          </el-form-item>

          <el-row style="display: inline-flex;width: 180px;padding-left: 80px;">
            <el-button style="font-size:9px;width: 110px;height: 22px;padding: 1px;background:rgba(244,244,244,1);border:1px solid rgba(187,187,187,1);" @click="deviceFormCancle">取消</el-button>
            <el-button style="font-size:9px;width: 110px;height: 22px;padding: 1px;margin-left: 4px;background-color: #1C7CD5;color: #fff;" @click="insertDeviceInfoFormPost('deviceUserInfo')">新增</el-button>
          </el-row>
        </el-form>
      </div>
      <div class="device-info-form-edit" :style="deviceInfoFormEditStyle">
        <el-form class="apply-form first-form" :model="deviceUserInfo" :rules="rules"  ref="deviceUserInfoEdit">
          <input type="hidden" v-model="deviceUserInfo.id">
          <el-form-item label="设备编号:" prop="termId">
          <el-input v-model="deviceUserInfo.termId" size="mini" placeholder="请填写设备编号"></el-input>
          </el-form-item>

          <el-form-item label="设备类型:" prop="type">
          <el-select v-model="deviceUserInfo.type" size="mini" style="width: 180px;" placeholder="请选择设备类型">
            <el-option :value="1" label="安全帽"></el-option>
            <el-option :value="2" label="手环"></el-option>
            <el-option :value="3" label="安全带"></el-option>
          </el-select>
          </el-form-item>

          <el-form-item label="绑定人员:" prop="ownerId">
          <el-select v-model="deviceUserInfo.ownerId" size="mini" style="width: 180px;" placeholder="请选择人员">
            <el-option v-for="(item,index) in owner" :key="index" :label="item.name+'('+getRoleName(item.role)+')'" :value="item.id"></el-option>
          </el-select>
          </el-form-item>

          <el-row style="display: inline-flex;width: 180px;padding-left: 80px;">
            <el-button style="font-size:9px;width: 110px;height: 22px;padding: 1px;background-color: #888;color: #fff;" @click="deviceFormEditCancle">取消</el-button>
            <el-button style="font-size:9px;width: 110px;height: 22px;padding: 1px;margin-left: 4px;background-color: #1C7CD5;color: #fff;" @click="saveDeviceInfoFormPost('deviceUserInfoEdit')">保存</el-button>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Device",
  data(){
    const isNum = (rule, value, callback) => {
      const age= /^[A-Za-z0-9]{1,500}$/
      if (!age.test(value)) {
        callback(new Error('设备编号只可以输入数字和字母'))
      }else{
        callback()
      }
    }
    const lengthMax = (rule,value,callback) => {
      var temp = 0
      for (var i = 0; i < value.length; i++) {
        if (/[\u4e00-\u9fa5]/.test(value[i])) {
          temp += 2
        } else {
          temp++
        }
      }
      if (temp > 50) {
        callback(new Error('长度不能超过50个字符'))
      }else {
        callback()
      }
    }
    return {
      activeName: 'first',
      deviceStyle: 'device-list-body',
      coneStyle:'device-list-body',
      deviceInfoFormEditStyle:"display:none",
      deviceInfoFormStyle:"display:none",
      deviceUserInfo:{
          id:"",
          termId:"",
          type:1,
          ownerId:"",
          ownerName:"",
          ownerRole:"",
          fenceId:""
      },
      deviceUserInfo1:{
        id:"",
        termId:"",
        type:1,
        ownerId:"",
        ownerName:"",
        ownerRole:"",
        fenceId:""
      },
      deviceUser: [],
      owner:[],
      rules:{
        termId: [
          { required: true, message: "设备编号不能为空", trigger: "blur" },
          { validator: isNum,trigger: "blur"},
          { validator: lengthMax,trigger: "blur"},
        ],
        type: [{ required: true, message: " ", trigger: "blur" },],
        ownerId: [{ required: true, message: " ", trigger: "blur" },],
      }
    }
  },
  mounted() {
    var __this = this
    this.axios.get("device/listDeviceUser").then(function (response) {
      let result = response.data
      if(result.code=='200'){
        __this.deviceUser = result.result
      }
    }).catch(function (error) {
      console.log(error)
    })
    this.axios.get("person/listPerson").then(function (response) {
      let result = response.data
      if(result.code=='200'){
        __this.owner = result.result
      }
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods:{
    selectStyle(val){
      if(val=="first") {
        this.deviceStyle = 'device-list-body';
        this.$router.push({path: "/device"})
      }else if(val=="second") {
        // this.deviceStyle = 'device-list-body-700'
        this.$router.push({path: "/capital"})
      }else {
        this.coneStyle = 'device-list-body-800'
        this.$router.push({path: "/cone"})
      }
    },
    getRoleName(role){
      if(role==1){
        return "技工"
      }
      if(role==2){
        return "安全员"
      }
      if(role==3){
        return "监理"
      }
      return ""
    },
    deviceadd(){
      let that = this
      //this.$refs.deviceUserInfo.resetFields();
      that.deviceInfoReset()
      that.deviceInfoFormEditStyle="display:none"
      that.deviceInfoFormStyle = "display:block"

    },
    deviceInfoReset(){
      this.deviceUserInfo={
        id:"",
        termId:"",
        type:1,
        ownerId:"",
        owner:{
          id:"",
          name:"",
          role:""
        },
        fenceId:""
      }
      this.deviceUserInfo1={
        id:"",
        termId:"",
        type:1,
        ownerId:"",
        owner:{
          id:"",
          name:"",
          role:""
        },
        fenceId:""
      }
    },
    editDevice(index, row){
      this.deviceInfoFormEditStyle="display:block"
      this.deviceInfoFormStyle = "display:none"
      this.deviceUserInfo = JSON.parse(JSON.stringify(row))
    },
    deleteDevice(index, row){
      let that = this
      that.deviceInfoFormEditStyle="display:none"
      that.deviceInfoFormStyle="display:none"
      that.$confirm('确定删除此人员设备吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=> {
        that.axios.get("device/deleteDevice?id=" + row.id).then(function (response) {
          let result = response.data
          if (result.statusCode == '200') {
            that.$message({
              message: '删除数据成功！',
              duration:2000,
              type: 'success',
              offset: '300'
            });
            that.axios.get("device/listDeviceUser").then(function (response) {
              let result = response.data
              if (result.code == '200') {
                that.deviceUser = result.result
              }
            }).catch(function (error) {
              console.log(error)
            })
          }
        }).catch(function (error) {
          console.log(error)
        })
      }).catch(() => {
      })
    },
    deviceFormEditCancle(){
      let that = this
      that.deviceInfoFormEditStyle="display:none"
      that.deviceInfoFormStyle="display:none"
      that.deviceInfoReset()
    },
    clearError(){
      // this.$refs.deviceUserInfoEdit.resetFields;
      // this.$refs.deviceUserInfo.resetFields();
    },
    deviceFormCancle(){
      this.deviceInfoFormEditStyle="display:none"
      this.deviceInfoFormStyle="display:none"
      this.deviceInfoReset()
      this.$refs.deviceUserInfo.resetFields();
    },
    saveDeviceInfoFormPost(deviceUserInfoEdit){
      let _this = this
      this.$refs.deviceUserInfoEdit.validate((valid) => {
        if(valid){
          /* json格式提交： */
          let saveDate={
            "id": this.deviceUserInfo.id,
            "termID": this.deviceUserInfo.termId,
            "type":this.deviceUserInfo.type,
            "owner":this.deviceUserInfo.ownerId,
          }
          //let formData = JSON.stringify(this.saveDate);
          let config = {
            headers: {'Content-Type': 'application/json'}
          }
          this.axios.post("device/editDevice", saveDate, config).then((res)=>{
            if(res.data.code == '200'){
              this.$message({
                message: '修改数据成功！',
                duration:1000,
                type: 'success',
                offset:'300'
              });
              _this.deviceInfoFormEditStyle = "display:none"
              this.axios.get("device/listDeviceUser").then(function (response) {
                let result = response.data
                if(result.code=='200'){
                  _this.deviceUser = result.result
                }
              }).catch(function (error) {
                console.log(error)
              })
            }
            if(res.data.code == '500'){
              this.$alert(res.data.message, '提示', {
                confirmButtonText: '确定',
              });
            }
          })
        }else{
        }
      })
    },
    insertDeviceInfoFormPost(deviceUserInfo){
      let _this = this
      this.$refs.deviceUserInfo.validate((valid) => {
        if(valid){
          /* json格式提交： */
          let saveDate={
            "termID": _this.deviceUserInfo1.termId,
            "type":_this.deviceUserInfo1.type,
            "state":0,
            "owner":_this.deviceUserInfo1.ownerId,
            "working":0,
          }
          //let formData = JSON.stringify(this.saveDate);
          let config = {
            headers: {'Content-Type': 'application/json'}
          }
          this.axios.post("device/saveDevice", saveDate, config).then((res)=>{
            //this.reload()
            if(res.data.code == '200'){
              this.$message({
                message: '添加数据成功！',
                duration:1000,
                type: 'success',
                offset:'300'
              });
              _this.deviceInfoFormStyle = "display:none"
              this.axios.get("device/listDeviceUser").then(function (response) {
                let result = response.data
                if(result.code=='200'){
                  _this.deviceUser = result.result
                }
              }).catch(function (error) {
                console.log(error)
              })
            }
            if(res.data.code == '500'){
              this.$alert(res.data.message, '提示', {
                confirmButtonText: '确定',
              });
            }
          })
        }else{

        }
      })
    }
  }
}
</script>

<style scoped>
.device-radio-body{
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border-width: 0;
  position: fixed;
  top: 80px;
  left: 1rem;
  padding: 0.15rem 0rem;
  border-radius: 0.2rem;
  z-index: 999;
  height: 30px;
  width: 600px;
}
.device-list-body {
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border-width: 0;
  position: fixed;
  top: 114px;
  left: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  box-shadow: 0 1px 1px 0 rgba(105, 106, 108,0);
  padding:0;
  border-radius: 0.2rem;
  z-index: 999;
  height: 137px;
  background-color: rgba(1,1,1,0);
  width: 800px;
}
.device-list-body  .el-tabs__header{
  display: none;
}
.device-list-body .el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 30px;
}
.device-list-body .el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 30px;
}

.device-list-body .el-table__row td{
  background-color: rgba(233,243,252,1);
}
.device-list-body .el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: rgba(246,251,255,1);
}
.device-list-body .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #d3faef;
  color: #118b9c;
}

.device-list-body table tr:first-child th:first-child {
  border-top-left-radius: 4px;
}

.device-list-body table tr:first-child th:last-child {
  border-top-right-radius: 4px;
}
.device-list-body-body table tr:last-child td:first-child {
  border-bottom-left-radius: 4px;
}

.device-list-body-body table tr:last-child td:last-child {
  border-bottom-right-radius: 4px;
}


.device-add-button{
  position: absolute;
  left: 705px;
  top: 117px;
  z-index: 1999;
}

.cone-add-button{
  position: absolute;
  left: 645px;
  top: 118px;
  z-index: 9999;
}

.device-info-form{
    display: none;
    flex-direction: column;
    min-width: 0;
    background-color: #fff;
    word-wrap: break-word;
    background-clip: border-box;
    width: 180px;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    position: fixed;
    top: 80px;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px 10px;
    z-index: 200;
    height: 200px;
}

.device-info-form .el-input__inner{
  border-radius: 1px
}
.device-info-form .el-input--prefix .el-input__inner {
  padding-left: 10px;
}
.device-info-form .el-input__prefix{
  left: 145px;
}

.device-info-form-edit{
    display: none;
    flex-direction: column;
    min-width: 0;
    background-color: #fff;
    word-wrap: break-word;
    background-clip: border-box;
    width: 180px;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    position: fixed;
    top: 80px;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px 10px;
    z-index: 200;
    height: 200px;
}


.device-info-form-edit .el-input__inner{
  border-radius: 1px
}
.device-info-form-edit .el-input--prefix .el-input__inner {
  padding-left: 10px;
}
.device-info-form-edit .el-input__prefix{
  left: 145px;
}
.el-form-item__content{
  line-height: 20px;
  font-size: 12px;
}
.el-form-item__label{
  line-height: 22px;
  font-size: 12px;
}
.el-form-item {
    margin-bottom: 2px;
}
.showButton{
  display: block;
}
.hiddenButton{
  display: none;
}
.el-table{
  font-family: "Microsoft YaHei" ! important;
  font-size: 10px;
  font-weight: 500;
  color: #000;
}
.el-table td, .el-table th{
  padding: 3px 0;
}
.el-table-column--selection .cell{
  padding-left: 10px;
}
</style>
